<app-dialog-component title="{{'cycle-edit-form.title' | translate}}" [formGroup]="cycleForm" saveAndCloseLabel="{{'cycle-edit-form.save' | translate}}" [hasFormGroupError]="true" (okEmitter)="saveCycle()">
  <form [formGroup]="cycleForm">
    <mat-form-field class="fullWidth">
      <input type="text" matInput placeholder="{{ 'cycle-edit-form.name' | translate }}" formControlName="name">
      <mat-error><app-form-error [control]="cycleForm.get('name')"></app-form-error></mat-error>
    </mat-form-field>

    <mat-form-field class="halfWidth leftDate">
      <input matInput [matDatepicker]="cycleEditStartDatePicker" placeholder="{{ 'cycle-edit-form.start-date' | translate }}" formControlName="startDate">
      <mat-datepicker-toggle matSuffix [for]="cycleEditStartDatePicker"></mat-datepicker-toggle>
      <mat-datepicker #cycleEditStartDatePicker></mat-datepicker>
      <mat-error><app-form-error [control]="cycleForm.get('startDate')"></app-form-error></mat-error>
    </mat-form-field>
    <mat-form-field class="halfWidth rightDate">
      <input matInput [matDatepicker]="cycleEditEndDatePicker" placeholder="{{ 'cycle-edit-form.end-date' | translate }}" formControlName="endDate">
      <mat-datepicker-toggle matSuffix [for]="cycleEditEndDatePicker"></mat-datepicker-toggle>
      <mat-datepicker #cycleEditEndDatePicker></mat-datepicker>
      <mat-error><app-form-error [control]="cycleForm.get('endDate')"></app-form-error></mat-error>
    </mat-form-field>
    <mat-slide-toggle formControlName="isVisible">
      <span>{{ 'cycle-edit-form.visibility' | translate }}</span>
    </mat-slide-toggle>
  </form>
</app-dialog-component>
